<template>
  <div>
    <div class="demo" :style="style" ref="domRef">
      <div class="pointer" @pointerdown="pointerdown"></div>
    </div>
    <div class="test-dom"></div>
    <button @click="get">get</button>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, useTemplateRef } from 'vue';

const domRef = useTemplateRef<HTMLElement>('domRef');
const w = ref(100);
const h = ref(100);
const rotate = ref(45);

/**
 * 计算CSS旋转后的新坐标
 * @param x 原始X坐标
 * @param y 原始Y坐标
 * @param degrees 旋转角度（度）
 * @param originX 旋转中心点X坐标，默认为0
 * @param originY 旋转中心点Y坐标，默认为0
 * @returns 旋转后的新坐标
 */
function calculateRotationCoordinates(
  x: number,
  y: number,
  degrees: number,
  originX: number = 0,
  originY: number = 0,
): { x: number; y: number } {
  // 将角度转换为弧度
  const radians = (degrees * Math.PI) / 180;
  const cos = Math.cos(radians);
  const sin = Math.sin(radians);

  // 平移到原点
  const tempX = x - originX;
  const tempY = y - originY;

  // 应用旋转矩阵
  const rotatedX = tempX * cos - tempY * sin;
  const rotatedY = tempX * sin + tempY * cos;

  // 平移回原中心点
  return {
    x: rotatedX + originX,
    y: rotatedY + originY,
  };
}

const pointerdown = () => {};
const style = computed(() => {
  const { x, y } = calculateRotationCoordinates(0, 0, rotate.value, 50, 50);
  console.log(x, y);

  return {
    width: `${w.value}px`,
    height: `${h.value}px`,
    rotate: `${rotate.value}deg`,
  };
});

const get = () => {
  if (!domRef.value) return;
  const rect = domRef.value!.getBoundingClientRect();
  console.log(rect);
};
</script>

<style lang="scss" scoped>
.demo {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  height: 100px;
  .pointer {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: red;
    right: -5px;
    top: -5px;
  }
}
.test-dom {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
